<template>
	<view class="search-container">
		<!-- 搜索条件 -->
		<view class="search-hd" @touchmove.stop.prevent>
			<u-form id="myForm" :model="form" :border-bottom="false" label-position="left" label-align="center" :label-width="120"
			 :label-style="labelStyle" ref="uForm">
				<u-form-item label="筛 选" class="my-form-item" style="padding-top: 20rpx;height: 70rpx;margin-top: 15rpx;">
					<u-input class="my-input-rp02name" v-model="form.rp02name" :height="70" type="select" placeholder="省"
					 :select-open="show" @tap="showFn()" />
					<u-input class="my-input-rp03name" v-model="form.rp03name" :height="70" type="select" placeholder="市"
					 :select-open="show2" @tap="show2Fn()" />
				</u-form-item>
			</u-form>
		</view>
		<!-- 搜索结果 -->
		<view class="store-rcord-list">
			<scroll-view v-if="storeList.length > 0" class="content" scroll-y style="width: 100%;height: 100%;" :scroll-top="scrollTop" @scroll="recordScrollPosition">
				<!--  -->
				<view v-for="(item, idx) in storeList" :key="idx" class="rcord-item">
					<view class="rcord-item-top ware-wrap">
							<view class="label">所属城市：</view>
							{{ item.city }}
					</view>
					<view class="rcord-item-top wrae-name">
							<view class="label">仓库名称：</view>
							<view v-for="(it,idex) in item.userInfoList" :key="'ware'+idex" style="display: flex;"> {{ it.storehouseName }}<view v-if="idex < item.userInfoList.length-1">/</view></view>
					</view>
					<view class="rcord-item-top" v-for="(it,idex) in item.userInfoList" :key="'user'+idex">
						<view class="contentTop"><view class="label">联系人：</view>{{ it.userName }}</view>
						<view class="contentTop"><view class="label">电 &nbsp; 话：</view>
							<view @click="callPhone(it.telephone)">
								<!-- #ifdef APP-PLUS -->
								<text>{{it.telephone}}</text>
								<!-- #endif -->
								<!-- #ifdef H5 -->
								<a :href="'tel:' + it.telephone">{{ it.telephone }}</a>
								<!-- #endif -->
							</view>
						</view>
					</view>
					<view class="rcord-item-map">
						<view class="address-text" @click="goMap(item)">{{ item.address }}</view>
						<view class="copy-address" @click="copyAddress(item)">复制地址</view>
					</view>
				</view>
			</scroll-view>
			<!-- 暂无数据 -->
			<view v-if="storeList.length == 0" class="none-record">暂无记录</view>
		</view>
		<!-- 筛选弹出框 -->
		<u-picker mode="selector" class="my-u-picker" v-model="show" @confirm="actionSheetCallback" :range="actionSheetList"
		:z-index="9999" range-key="rp02name"></u-picker>
		<u-picker mode="selector" class="my-u-picker" v-model="show2" @confirm="actionSheetCallback2" :range="actionSheetList2"
		 :z-index="9999" range-key="rp03name"></u-picker>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		provinceList,
		storeHouseList
	} from '../../common/service.js'

	export default {
		data() {
			return {
				labelStyle: {
					'height': '98rpx',
					'color': '#666666',
					'font-size': '28rpx',
					'font-family': 'PingFangSC-Regular, PingFang SC',
					'font-weight': '400',
					'display': 'flex',
					'justify-content': 'space-between'
				},
				form: {
					rp02: '',
					rp02name: '',
					rp03: '',
					rp03name: '',
				},
				show: false,
				show2: false,
				actionSheetList2: [],
				actionSheetList: [],
				storeList: [],
				nearStoreList: [],
				tempValue:'',
				scrollTop: 0, // 记录滚动位置
				pageNum:1,
				pageSize:10,
			}
		},
		onLoad: function(option) {
			// alert('onLoad')
			// uni.removeStorage({
			// 	key: 'warehouseQuery',
			// 	success: function (res) {
			// 		// console.log('success');
			// 	}
			// });
			
			this.LOGINACTION();
			let warehouseQuery = uni.getStorageSync('warehouseQuery');
			if(warehouseQuery){
				this.form = JSON.parse(JSON.stringify(warehouseQuery));
				this.queryStoreList();
			} else {
				this.queryStoreList();
			}
		},
		onShow: function() {
			const that = this;
			// alert('onShow')
			// 页面显示时，滚动到记录的位置
			if (this.scrollTop > 0) {
				uni.pageScrollTo({
					scrollTop: this.scrollTop,
					duration: 0,
				});
			}
		},
		
		methods: {
			// 阻止页面滚动
			stop(){
				var box=function(e){passive: false ;};
				document.body.style.overflow='hidden';
				document.addEventListener("touchmove",box,false);
			},
			// 允许页面滚动
			move(){
				var box=function(e){passive: false };
				document.body.style.overflow=''; // 出现滚动条
				document.removeEventListener("touchmove",box,false);
			},
			// 筛选条件后查询的列表数据
			queryStoreList() {
				const that = this;
				const params = {
					province: that.form.rp02name == '全部' ? '' : encodeURI(that.form.rp02name) || '',
					city: that.form.rp03name == '全部' ? '' : encodeURI(that.form.rp03name) || '',
				};
				
				storeHouseList(params, function(resuser) {
					if (resuser && resuser.statusCode == 200) {
						const rs = resuser.data;
						if (rs.code == 200) {
							const list = rs.rows || [];
							that.storeList = list;
							if (list.length == 0) {
								that.stop()
								
							} else {
								that.move()
							}
						} else {
							if (rs.msg) {
								that.$refs.uToast.show({
									title: rs.msg || '获取门店信息记录列表失败',
									type: 'error',
									duration: 3000,
									callback: function() {
										return;
									}
								});
							}
						}
					} else {
						console.log('模拟数据')
					}
				}, function(e) {
				});
			},
			
			goMap(row){
				// 将筛选条件存储在全局变量中
				uni.setStorageSync('warehouseQuery',this.form);
				
				const MapUrl = `http://apis.map.qq.com/uri/v1/marker?marker=coord:${row.latitude*1},${row.longitude*1};addr:${row.address}`
				// const MapUrl = `qqmap://map/marker?marker=coord:${row.latitude*1},${row.longitude*1};title:${row.address};addr=${row.address}&referer=EGJBZ-AXTKP-575D6-LYW46-QDQRS-PHF6G`
				// window.open(MapUrl);
				location.href = MapUrl
				
				// window.open(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbc20e61ad378ec64&redirect_uri=qqmap://map/marker?marker=coord:${row.latitude*1},${row.longitude*1};title:${row.address};addr=${row.address}&referer=EGJBZ-AXTKP-575D6-LYW46-QDQRS-PHF6G&response_type=code&scope=snsapi_base#wechat_redirect`) 
			},
			copyAddress(row){
				uni.setClipboardData({
				    data: row.address,
				    success: function () {
				        uni.showToast({
				            title: '复制成功',
				            icon: 'success',
				            duration: 2000
				        });
				    }
				});
			},
			callPhone(tel){
				// #ifdef APP-PLUS
				uni.makePhoneCall({
					phoneNumber: tel,
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
				 // #endif
								 
				 // #ifdef MP-WEIXIN
				 wx.makePhoneCall({
					phoneNumber: tel,
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
				// #endif
			},
			// 获取用户id
			getCode: function() {
				return this.CONFIG.user.id;
			},
			
			// 点击一级销区
			showFn() {
				const that = this;
				if (that.actionSheetList.length > 0) {
					that.show = true;
				} else {
					provinceList({}, function(resuser) {
						if (resuser && resuser.statusCode == 200) {
							const rs = resuser.data;
							console.log('一级销区列表结果:',rs);
							that.actionSheetList = [{province:'全部'},...rs.data] || [];
							if (that.actionSheetList.length > 0) {
								that.actionSheetList.forEach(function(item) {
									item.text = item.province || '';
									item.rp02 = item.province || '';
									item.rp02name = item.province || '';
									// delete item.province
								})
							}
							that.show = true;
						}
					}, function(e) {
						console.log('获取一级销区列表失败:',e);
					});
				}
			},
			
			// 点击一级销区回调，查询可选的二级销区
			actionSheetCallback(e) {
				const index = e[0];
				const that = this;
				that.form.rp02 = that.actionSheetList[index].rp02;
				that.form.rp02name = that.actionSheetList[index].rp02name;
				that.form.rp03 = '';
				that.form.rp03name = '';
				this.queryStoreList();
			},
			
			// 点击二级销区
			show2Fn() {
				const that = this;
				if (that.form.rp02name.length > 0) {
					const params = {
						province: that.form.rp02
					};
					provinceList(params, function(resuser) {
						if (resuser && resuser.statusCode == 200) {
							const rs = resuser.data;
							console.log('一级销区列表结果:',rs);
							that.actionSheetList2 = [{city:'全部'},...rs.data] || [];
							if (that.actionSheetList2.length > 0) {
								that.actionSheetList2.forEach(function(item) {
									item.text = item.city || '';
									item.rp03 = item.city || '';
									item.rp03name = item.city || '';
									delete item.city
								})
							}
							that.show2 = true;
						}
					}, function(e) {
						console.log('获取二级销区列表失败:',e);
					});
				} else {
					that.$refs.uToast.show({
						title: '请先选择一级销区',
						type: 'warning',
						duration: 3000,
						callback: function() {
							return;
						}
					});
				}
			},
			
			// 点击二级销区回调
			actionSheetCallback2(e) {
				const index = e[0];
				const that = this;
				that.form.rp03 = that.actionSheetList2[index].rp03;
				that.form.rp03name = that.actionSheetList2[index].rp03name;
				that.queryStoreList()
			},

			recordScrollPosition(event) {
				// 记录当前滚动位置
				this.scrollTop = event.detail.scrollTop;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page,
	.search-container {
		background-color: #F3F5F7;
	}

	.search-hd {
		position: fixed;
		left: 0;
		top: 0;
		width: 750rpx;
		height: 130rpx;
	}

	#myForm {
		width: 100%;
		padding-right: 20rpx;
		height: 130rpx;
	}

	.search-bd {
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		top: 346rpx;
		bottom: 0;
		background-color: #FFFFFF;
	}

	.my-input-rp02name {
		width: 150rpx;
		height: 70rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding-left: 20rpx !important;
		padding-right: 20rpx !important;
	}

	.my-input-rp03name,
	.my-input-brand {
		width: 150rpx;
		height: 70rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-left: 20rpx;
		padding-left: 20rpx !important;
		padding-right: 20rpx !important;
	}

	.my-input-brand {
		margin-right: 30rpx;
	}

	.my-input-storeAddress {
		width: 540rpx;
		height: 98rpx;
		background: #F7F7F7;
		border-radius: 16rpx;
		padding-left: 15rpx !important;
		padding-right: 15rpx !important;
		margin-right: 30rpx;
		margin-top: 26rpx;
	}

	.my-u-picker {
		position: fixed;
		z-index: 99 !important;
	}
	/* 列表数据 */
	.store-rcord-list{
		position: fixed;
		top: 130rpx;
		left: 0;
		right: 0;
		padding: 0 20rpx 20rpx;
		height: calc(100% - 130rpx);
		
		.rcord-item{
			width: 710rpx;
			padding: 20rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			&-top{
				display: flex;
				justify-content: space-between;
				font-size: 30rpx;
				color: #333333;
				margin-bottom: 8rpx;
				.label{
					color: #999999;
				}
				.tel{
					color: #5181B0;
				}
			}
			&-map{
				display: flex;
				align-items: center;
				margin-top: 12rpx;
				padding: 21rpx 10rpx 10rpx 42rpx;
				line-height: 45rpx;
				background: url('../../static/map.png');
				font-size: 30rpx;
				color: #333333;
				background-size: 36rpx;
				background-repeat: no-repeat;
				background-position: left center;
				border-top: 1px solid #F7F7F7;
				.address-text{
					flex: 1;
				}
				.copy-address{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 158rpx;
					margin-left: 8rpx;
					padding: 6rpx 0 6rpx 35rpx;
					text-align: center;
					font-size: 26rpx;
					background: url('');
					background-size: 30rpx;
					background-repeat: no-repeat;
					background-position: 8rpx center;
					border: 1rpx solid #999;
					border-radius: 8rpx;
				}
			}
			.contentTop{
				display: flex;
				width: 50%;
			}
		}
	}
	.none-record{
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #999999;
		padding-top: 534rpx;
		background: url('../../static/toStore/storeRcord-none.png') no-repeat center 213rpx;
		background-size: 460rpx 319rpx;
		text-align: center;
	}
	.store-rcord-list .ware-wrap{
		justify-content: flex-start;
	}
	.store-rcord-list .wrae-name{
		flex-wrap: wrap;
		justify-content: flex-start;
	}
</style>